<template>
	<view class="uploader-body">
		<view class="uploader-files">
			<view class="uploader-input-box">
				<view class="uploader-input solids" @tap="ChooseImage">
				</view>
			
			</view>
		</view>
	</view>

	
</template>

<script>
export default {
	name: 'chooseImage',
	props:{
		payload:{
			type:Object,
			default: ()=>{}
		},
		dir:{
			type:String,
			default:''
		}
		
	},
	data() {
		return {
			full_path_img:"",
		};
	},
	
	computed:{
		get_form_data(){
			let obj = {type:this.dir,'x:img_type':this.dir,...this.vuex_upload_info.data}
			return obj
		}
	},
	mounted() {
		if(!this.vuex_upload_info.url){
			this.$u.http.get("/api/upload/info",{
				
			}).then(({data})=>{
				this.$u.vuex('vuex_upload_info', data||{})
				console.log('-----mounted',this.vuex_upload_info)
			}).catch(v=>{
				this.$u.toast("获取上传资源异常")
			})
		}
	},
	

	methods: {
		chooseImage(params) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: (res) => {
					console.log('+++++++++++++++++++++',res)
					
					this.uploadFile(params,res.tempFilePaths)
					// console.log(res.tempFilePaths)
					// let that = this
					// upload({dir_name:params.type||'image'},res.tempFilePaths).then((data)=>{
					// 	const [upload_data={}] = data
					// 	console.log('++++++++++++',data,upload_data)
						
					// })
					
					
				}
			});
		},
		
		uploadFile(params,file,fn){
			
			uni.uploadFile({
				url: this.vuex_upload_info.url, //仅为示例，非真实的接口地址
				filePath: file,
				name: 'file',
				formData: this.get_form_data,
				success: (uploadFileRes) => {
					console.log('????????????',uploadFileRes,typeof uploadFileRes.data,typeof fn)
					var res = uploadFileRes.data||{}
					if(typeof uploadFileRes.data==='string'){
						res =JSON.parse(uploadFileRes.data)
					}
					
					if(typeof fn==='function'){
						fn(params,res.data||{})
					}else{
						this.$emit('uploadSuccess',params,res.data||{})
					}
					// this.$emit('uploadSuccess',params,res)
				},
				fail(e) {
					console.error('uploaderror',e)
				}
			});
			
			// upload({dir_name:params.type||'image'},file).then((data)=>{
			// 	const [upload_data={}] = data
			// 	console.log('++++++++++++',data,upload_data)
			// 	if(typeof fn==='function'){
			// 		fn(params,upload_data.data||{})
			// 	}else{
			// 		this.$emit('uploadSuccess',params,upload_data.data||{})
			// 	}
			// })
		}
	}
};
</script>

<style lang="scss">
	.uploader-body {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 2;
		.uploader-files {
			width: 100%;
			height: 100%;		
			.bg-img {
				width: 100%;
				height: 100%;
				background-color: #000000;
				.uploader-file {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
					.cu-tag {
						position: absolute;
						right: 0;
						top: 0;
					}
				}				
			}
			.uploader-input-box {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.solids {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: rgba(0,0,0,0);
					text[class*="cuIcon-"] {
						color: #FFFFFF;
						font-size: 54rpx;
					}
					&::after {
						border:none
					}
				}
				
			}
		}
	}
</style>
